<template>
	<div class="draw-tabs" id="draw-tabs-id">
		<el-tabs v-model="activePage">
			<el-tab-pane label="图元" name="first">
				<div class="pic-title">基本图元</div>
				<div class="pic-base">
					<el-button
						v-for="(item, index) in baseArr"
						:key="item.name"
						:style="{
							'background-image': 'url(' + require('@/assets/images/draw/other/base/' + item.url) + ')',
							'background-color': actionType == index ? '#B67D10' : null,
						}"
						@click="drawBase(index)"
					>
						<div class="dec">{{ item.name }}</div>
					</el-button>
				</div>
				<div class="pic-title">其他图元</div>
				<div class="pic-other">
					<template v-for="(val, key) in otherPrimitives">
						<el-button
							v-for="(item, dindex) in val"
							:key="key + item.name"
							:style="{
								'background-image': 'url(' + require('@/assets/images/draw/other/' + item.url) + ')',
								'background-color': actionType == key + dindex ? '#B67D10' : null,
							}"
						>
							<div class="dec">{{ item.name }}</div>
							<div class="choose">
								<div class="choose-top" @click="drawPic(item.name, key + dindex, require('@/assets/images/draw/other/' + item.url))">贴地</div>
								<div class="choose-bot" @click="drawMark(item.name, key + dindex, require('@/assets/images/draw/other/' + item.url))">屏幕</div>
							</div>
						</el-button>
					</template>
				</div>
			</el-tab-pane>
			<el-tab-pane label="属性" name="second">
				<div class="pointForm" v-if="groundForm">
					<el-form label-position="right" label-width="80px" :model="groundForm">
						<el-form-item label="填充" v-show="!groundForm.addedType">
							<el-switch v-model="groundForm.fill" active-color="#1B6477" inactive-color="#39424D"></el-switch>
						</el-form-item>
						<el-form-item label="填充色" v-show="!groundForm.addedType">
							<el-color-picker v-model="groundForm.color" size="small" show-alpha></el-color-picker>
						</el-form-item>
						<el-form-item label="图片" v-if="groundForm.hasOwnProperty('image')">
							<el-radio-group v-model="groundForm.image" size="mini">
								<el-radio-button :label="$refs.img1">
									<span class="">
										<img src="@/assets/images/draw/circle2.png" class="pic" alt="" ref="img1" />
									</span>
								</el-radio-button>
								<el-radio-button :label="$refs.img2">
									<span class="">
										<img src="@/assets/images/draw/word2.png" class="pic" alt="" ref="img2" />
									</span>
								</el-radio-button>
								<el-radio-button :label="$refs.img3">
									<span class="">
										<img src="@/assets/images/draw/oval2.png" class="pic" alt="" ref="img3" />
									</span>
								</el-radio-button>
								<el-radio-button :label="$refs.img4">
									<span class="">
										<img src="@/assets/images/draw/rectangle2.png" class="pic" alt="" ref="img4" />
									</span>
								</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="大小" v-if="groundForm.hasOwnProperty('scale')">
							<el-input-number v-model="groundForm.scale" controls-position="right" @change="handleChange" size="small" :step="0.1"></el-input-number>
						</el-form-item>
						<el-form-item label="文字内容" v-if="groundForm.hasOwnProperty('text')">
							<el-input v-model="groundForm.text" size="small"></el-input>
						</el-form-item>
						<el-form-item label="字号" v-if="groundForm.hasOwnProperty('fontSize')">
							<el-input-number v-model="groundForm.fontSize" controls-position="right" size="small" :min="12" :step="0.5"></el-input-number>
						</el-form-item>
						<el-form-item label="字体" v-if="groundForm.hasOwnProperty('fontFamily')">
							<el-radio-group v-model="groundForm.fontFamily" size="mini">
								<el-radio-button label="黑体">黑体</el-radio-button>
								<el-radio-button label="宋体">宋体</el-radio-button>
								<el-radio-button label="楷体">楷体</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="线宽" v-if="groundForm.hasOwnProperty('width')">
							<el-input-number v-model="groundForm.width" controls-position="right" size="small" :min="1" :step="0.5"></el-input-number>
						</el-form-item>
						<el-form-item label="线型" v-if="groundForm.hasOwnProperty('lineType')">
							<el-radio-group v-model="groundForm.lineType" size="mini">
								<el-radio-button label="Color">普通</el-radio-button>
								<el-radio-button label="PolylineGlow">发光</el-radio-button>
								<el-radio-button label="PolylineDash">虚线</el-radio-button>
								<el-radio-button label="PolylineOutline">带外衬色</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item
							label="边框线"
							v-if="(targetType === 'GroundCircle' || targetType === 'GroundRectangle' || targetType === 'GroundEllipse' || targetType === 'GroundPolygon') && !groundForm.addedType"
						>
							<el-switch v-model="groundForm.outline" active-color="#1B6477" inactive-color="#39424D"></el-switch>
						</el-form-item>
						<el-form-item label="边框线颜色" v-if="groundForm.outline">
							<el-color-picker v-model="groundForm.outlineColor" show-alpha size="small"></el-color-picker>
						</el-form-item>
						<el-form-item label="边框线宽度" v-if="groundForm.outline">
							<el-input-number v-model="groundForm.outlineWidth" controls-position="right" size="small" :min="0" :step="0.5"></el-input-number>
						</el-form-item>
						<el-form-item label="外衬色" v-if="targetType === 'Text'">
							<el-color-picker v-model="groundForm.outlineColor" show-alpha size="small"></el-color-picker>
						</el-form-item>
						<el-form-item label="外衬色" v-else-if="targetType === 'GroundPolyline' && groundForm.lineType === 'PolylineOutline'">
							<el-color-picker v-model="groundForm.outlineColor" show-alpha size="small"></el-color-picker>
						</el-form-item>
						<el-form-item label="外衬线宽度" v-if="targetType === 'Text'">
							<el-input-number v-model="groundForm.outlineWidth" controls-position="right" size="small" :min="0" :step="0.5"></el-input-number>
						</el-form-item>
						<el-form-item label="外衬线宽度" v-else-if="targetType === 'GroundPolyline' && groundForm.lineType === 'PolylineOutline'">
							<el-input-number v-model="groundForm.outlineWidth" controls-position="right" size="small" :min="0" :step="0.5"></el-input-number>
						</el-form-item>
						<el-form-item label="发光强度" v-if="groundForm.lineType === 'PolylineGlow'">
							<el-input-number v-model="groundForm.glowPower" controls-position="right" size="small" :min="0" :step="0.01" :max="1"></el-input-number>
						</el-form-item>
						<el-form-item label="单位长度" v-if="groundForm.lineType === 'PolylineDash'">
							<el-input-number v-model="groundForm.dashedLength" controls-position="right" size="small" :min="1"></el-input-number>
						</el-form-item>
						<el-form-item label="实线比例" v-if="groundForm.lineType === 'PolylineDash'">
							<el-input-number v-model="groundForm.dashedScale" controls-position="right" size="small" :min="0" :max="1" :step="0.1"></el-input-number>
						</el-form-item>
						<el-form-item label="半径" v-if="groundForm.hasOwnProperty('radius')" class="lengthen">
							<el-input-number v-model="groundForm.radius" controls-position="right" size="small" :min="0"></el-input-number>
						</el-form-item>
						<el-form-item label="长半轴" v-if="groundForm.hasOwnProperty('semiMajorAxis')" class="lengthen">
							<el-input-number v-model="groundForm.semiMajorAxis" controls-position="right" size="small" :min="0"></el-input-number>
						</el-form-item>
						<el-form-item label="短半轴" v-if="groundForm.hasOwnProperty('semiMinorAxis')" class="lengthen">
							<el-input-number v-model="groundForm.semiMinorAxis" controls-position="right" size="small" :min="0"></el-input-number>
						</el-form-item>
						<el-form-item label="旋转角度" v-if="targetType === 'GroundEllipse' && groundForm.hasOwnProperty('rotation')" class="lengthen">
							<el-input-number v-model="groundForm.rotation" controls-position="right" size="small"></el-input-number>
						</el-form-item>
						<el-form-item label="经度坐标" v-if="targetType === 'Marker' || targetType === 'Text'" class="lengthen">
							<el-input-number v-model="groundForm.position.lon" controls-position="right" size="small" :min="-180" :max="180" placeholder="经度"></el-input-number>
						</el-form-item>
						<el-form-item label="维度坐标" v-if="targetType === 'Marker' || targetType === 'Text'" class="lengthen">
							<el-input-number v-model="groundForm.position.lat" controls-position="right" size="small" :min="-180" :max="180" placeholder="维度"></el-input-number>
						</el-form-item>
						<el-form-item label="圆心经度" v-if="targetType === 'GroundCircle' || targetType === 'GroundEllipse'" class="lengthen">
							<el-input-number v-model="groundForm.center.lon" controls-position="right" size="small" :min="-180" :max="180" placeholder="经度">经度</el-input-number>
						</el-form-item>
						<el-form-item label="圆心维度" v-if="targetType === 'GroundCircle' || targetType === 'GroundEllipse'" class="lengthen">
							<el-input-number v-model="groundForm.center.lat" controls-position="right" size="small" :min="-180" :max="180" placeholder="维度">维度</el-input-number>
						</el-form-item>
						<el-form-item label="矩形范围" v-if="groundForm.hasOwnProperty('extent')" class="lengthen">
							<el-input-number v-model="groundForm.extent.west" controls-position="right" size="small" :min="-180" :max="groundForm.extent.east" placeholder="经度"></el-input-number>
							<el-input-number v-model="groundForm.extent.south" controls-position="right" size="small" :min="-90" :max="groundForm.extent.north" placeholder="维度"></el-input-number>
							<el-input-number v-model="groundForm.extent.east" controls-position="right" size="small" :min="groundForm.extent.west" :max="180" placeholder="经度"></el-input-number>
							<el-input-number v-model="groundForm.extent.north" controls-position="right" size="small" :min="groundForm.extent.south" :max="90" placeholder="维度"></el-input-number>
						</el-form-item>
					</el-form>
				</div>

				<div class="tips" v-else style="text-align: center">请选择图元</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
export default {
	props: {
		activeLayer: String,
		activeLayerParent: String,
	},
	data() {
		return {
			activePage: 'first',
			actionType: null,
			actionName: null,
			targetType: null,
			groundForm: null,
			baseArr: [
				{
					name: '点',
					url: 'point.png',
				},
				{
					name: '线',
					url: 'line.png',
				},
				{
					name: '面',
					url: 'surface.png',
				},
				{
					name: '圆',
					url: 'circle.png',
				},
				{
					name: '椭圆',
					url: 'oval.png',
				},
				{
					name: '矩形',
					url: 'rectangle.png',
				},
				{
					name: '文字',
					url: 'word.png',
				},
			],
			otherPrimitives: {
				weatherArr: [
					{
						name: '中雨',
						url: '中雨.png',
					},
					{
						name: '中雪',
						url: '中雪.png',
					},
					{
						name: '雨加雪',
						url: '雨加雪.png',
					},
					{
						name: '雪',
						url: '雪.png',
					},
					{
						name: '雾',
						url: '雾.png',
					},
					{
						name: '冰雹',
						url: '冰雹.png',
					},
					{
						name: '阵雨',
						url: '阵雨.png',
					},
					{
						name: '阴天',
						url: '阴天.png',
					},
					{
						name: '晴',
						url: '晴.png',
					},
					{
						name: '晴转多云',
						url: '晴转多云.png',
					},
					{
						name: '雷电',
						url: '雷电.png',
					},
					{
						name: '大风',
						url: '大风.png',
					},
				],
				disasterArr: [
					{
						name: '位置标2',
						url: '位置标2.png',
					},
					{
						name: '向下1',
						url: '向下1.png',
					},
					{
						name: '位置标1',
						url: '位置标1.png',
					},
					{
						name: '方向',
						url: '方向.png',
					},
					{
						name: '指南针',
						url: '指南针.png',
					},
					{
						name: '路牌',
						url: '路牌.png',
					},
					{
						name: '位置标',
						url: '位置标.png',
					},
					{
						name: '向下(危)',
						url: '向下(危).png',
					},
					{
						name: '向上',
						url: '向上.png',
					},
					{
						name: '向下',
						url: '向下.png',
					},
					{
						name: '台风',
						url: 'disaster/台风.png',
					},
					{
						name: '沙尘暴',
						url: 'disaster/沙尘暴.png',
					},
					{
						name: '泥石流',
						url: 'disaster/泥石流.png',
					},
					{
						name: '热带风暴',
						url: 'disaster/热带风暴.png',
					},
					{
						name: '龙卷风',
						url: 'disaster/龙卷风.png',
					},
					{
						name: '雷暴',
						url: 'disaster/雷暴.png',
					},
					{
						name: '巨浪',
						url: 'disaster/巨浪.png',
					},
					{
						name: '火灾',
						url: 'disaster/火灾.png',
					},
					{
						name: '滑坡',
						url: 'disaster/滑坡.png',
					},
					{
						name: '地震',
						url: 'disaster/地震.png',
					},
					{
						name: '病虫害',
						url: 'disaster/病虫害.png',
					},
					{
						name: '冰雹',
						url: 'disaster/冰雹.png',
					},
					{
						name: '崩塌',
						url: 'disaster/崩塌.png',
					},
					{
						name: '干旱',
						url: 'disaster/中度干旱.png',
					},
					{
						name: '洪涝',
						url: 'disaster/中度洪涝.png',
					},
				],
				homeArr: [
					{
						name: '城镇非住宅',
						url: 'home/城镇非住宅.png',
					},
					{
						name: '城镇住宅',
						url: 'home/城镇住宅.png',
					},
					{
						name: '楼房',
						url: 'home/楼房.png',
					},
					{
						name: '平房',
						url: 'home/平房.png',
					},
					{
						name: '农村住宅',
						url: 'home/农村住宅.png',
					},
					{
						name: '楼房倒塌',
						url: 'home/楼房倒塌.png',
					},
					{
						name: '平房倒塌',
						url: 'home/平房倒塌.png',
					},
				],
				projectArr: [
					{
						name: '学校',
						url: 'lifeProject/学校.png',
					},
					{
						name: '医院',
						url: 'lifeProject/医院.png',
					},
					{
						name: '水库',
						url: 'lifeProject/水库.png',
					},
					{
						name: '工矿企业',
						url: 'lifeProject/工矿企业.png',
					},
					{
						name: '发电站',
						url: 'lifeProject/发电站.png',
					},
				],
				peopleArr: [
					{
						name: '人',
						url: 'people/人.png',
					},
					{
						name: '被困人口',
						url: 'people/被困人口.png',
					},
					{
						name: '伤病人口',
						url: 'people/伤病人口.png',
					},
					{
						name: '失踪人口',
						url: 'people/失踪人口.png',
					},
					{
						name: '受灾人口',
						url: 'people/受灾人口.png',
					},
					{
						name: '死亡人口',
						url: 'people/死亡人口.png',
					},
					{
						name: '需救济人口',
						url: 'people/需救济人口.png',
					},
				],
			},
			GraphicItems: [],

			rasterObj: null,
		};
	},

	methods: {
		drawCallback(primitive, primitives, attribute) {
			if (primitive._scene.id !== viewer.scene.id) {
				new Cesium.C_DrawHelper(viewer.scene).stopDrawing();
				primitive.properties.isRight = true;
			} else if (window.rightViewer) {
				new Cesium.C_DrawHelper(window.rightViewer.scene).stopDrawing();
			}
			this.$emit(
				'addLeafNode',
				{
					id: primitive.id,
					label: '标绘',
					isLeaf: true,
				},
				primitive
			);
			this.actionType = null;
		},

		createOptions() {
			return {
				id: Cesium.createGuid(),
			};
		},
		createCallbacks() {
			return {
				endCallback: this.drawCallback,
				startEditCallback: this.startEditCallback,
				endEditCallback: this.endEditCallback,
			};
		},
		startEditCallback(obj, geometry) {
			console.log('startedit');

			this.groundForm = obj;
			this.targetType = geometry.getType();
			this.activePage = 'second';
			if (geometry.properties.addedType === 'Image') {
				this.groundForm.addedType = 'Image';
			}
		},
		endEditCallback(geometry) {
			this.groundForm = null;
			this.activePage = 'first';
		},
		getActiveLayer() {
			// let id = this.$parent.activeLayer
			// let pId = this.$parent.activeLayerParent
			let id = this.activeLayer;
			let pId = this.activeLayerParent;

			if (!id || !pId) {
				this.$message({
					message: '请设置活跃图层',
					type: 'warning',
					offset: 500,
				});
				return false;
			}
			return true;
		},
		// eslint-disable-next-line complexity
		drawBase(num) {
			this.actionType = num;
			this.actionName = null;
			if (this.getActiveLayer()) {
				let options = this.createOptions();
				let callbacks = this.createCallbacks();
				switch (num) {
					case 0: {
						// 点
						new Cesium.C_DrawHelper(viewer.scene).startDrawingMarker(options, callbacks);
						window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
						window.rightViewer && new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingMarker(options, callbacks);
						break;
					}
					case 1: {
						// 线
						options.color = 'rgba(255,0,0,1)';
						new Cesium.C_DrawHelper(viewer.scene).startDrawingPolyline(options, callbacks);
						window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
						window.rightViewer && new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingPolyline(options, callbacks);
						break;
					}
					case 2: {
						// 面
						new Cesium.C_DrawHelper(viewer.scene).startDrawingPolygon(options, callbacks);
						window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
						window.rightViewer && new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingPolygon(options, callbacks);
						break;
					}
					case 3: {
						// 圆
						new Cesium.C_DrawHelper(viewer.scene).startDrawingCircle(options, callbacks);
						window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
						window.rightViewer && new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingCircle(options, callbacks);
						break;
					}
					case 4: {
						// 椭圆
						new Cesium.C_DrawHelper(viewer.scene).startDrawingEllipse(options, callbacks);
						window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
						window.rightViewer && new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingEllipse(options, callbacks);
						break;
					}
					case 5: {
						// 矩形
						new Cesium.C_DrawHelper(viewer.scene).startDrawingExtent(options, callbacks);
						window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
						window.rightViewer && new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingExtent(options, callbacks);
						break;
					}
					case 6: {
						// 文本
						new Cesium.C_DrawHelper(viewer.scene).startDrawingTextAnnotation(options, callbacks);
						window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
						window.rightViewer && new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingTextAnnotation(options, callbacks);
						break;
					}

					default:
						break;
				}
			}
		},
		drawPiont(num) {
			this.actionType = num;
			if (this.getActiveLayer()) {
				let options = this.createOptions();
				let callbacks = this.createCallbacks();
				new Cesium.C_DrawHelper(viewer.scene).startDrawingMarker(options, callbacks);
				window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
				window.rightViewer && new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingMarker(options, callbacks);
			}
		},
		drawLine(num) {
			this.actionType = num;
			if (this.getActiveLayer()) {
				let options = this.createOptions();
				let callbacks = this.createCallbacks();
				options.color = 'rgba(255,0,0,1)';
				new Cesium.C_DrawHelper(viewer.scene).startDrawingPolyline(options, callbacks);
				window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
				window.rightViewer && new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingPolyline(options, callbacks);
			}
		},
		drawPolygon(num) {
			this.actionType = num;
			if (this.getActiveLayer()) {
				let options = this.createOptions();
				let callbacks = this.createCallbacks();
				new Cesium.C_DrawHelper(viewer.scene).startDrawingPolygon(options, callbacks);
				window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
				window.rightViewer && new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingPolygon(options, callbacks);
			}
		},
		drawCircle(num) {
			this.actionType = num;
			if (this.getActiveLayer()) {
				let options = this.createOptions();
				let callbacks = this.createCallbacks();
				new Cesium.C_DrawHelper(viewer.scene).startDrawingCircle(options, callbacks);
				window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
				window.rightViewer && new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingCircle(options, callbacks);
			}
		},
		drawEllipse(num) {
			this.actionType = num;
			if (this.getActiveLayer()) {
				let options = this.createOptions();
				let callbacks = this.createCallbacks();
				new Cesium.C_DrawHelper(viewer.scene).startDrawingEllipse(options, callbacks);
				window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
				window.rightViewer && new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingEllipse(options, callbacks);
			}
		},
		drawExtent(num) {
			this.actionType = num;
			if (this.getActiveLayer()) {
				let options = this.createOptions();
				let callbacks = this.createCallbacks();
				new Cesium.C_DrawHelper(viewer.scene).startDrawingExtent(options, callbacks);
				window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
				window.rightViewer && new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingExtent(options, callbacks);
			}
		},
		drawText(num) {
			this.actionType = num;
			if (this.getActiveLayer()) {
				let options = this.createOptions();
				let callbacks = this.createCallbacks();
				new Cesium.C_DrawHelper(viewer.scene).startDrawingTextAnnotation(options, callbacks);
				window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
				window.rightViewer && new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingTextAnnotation(options, callbacks);
			}
		},
		drawPic(name, index, url) {
			this.actionType = index;
			this.actionName = name;
			if (this.getActiveLayer()) {
				let options = this.createOptions();
				let callbacks = this.createCallbacks();
				options.appearance = new Cesium.MaterialAppearance({
					material: new Cesium.Material({
						fabric: {
							type: 'Image',
							uniforms: {
								image: url,
							},
						},
					}),
				});
				new Cesium.C_DrawHelper(viewer.scene).startDrawingExtent(options, callbacks);
				window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
				window.rightViewer && new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingExtent(options, callbacks);
			}
		},
		drawMark(name, index, url) {
			this.actionType = index;
			this.actionName = name;
			if (this.getActiveLayer()) {
				let options = this.createOptions();
				options.image = url;
				let callbacks = this.createCallbacks();
				new Cesium.C_DrawHelper(viewer.scene).startDrawingMarker(options, callbacks);
				window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
				window.rightViewer && new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingTextAnnotation(options, callbacks);
			}
		},
	},
};
</script>

<style lang="scss">
.el-tabs__item {
	color: #fff;
}
.el-tabs__nav-wrap::after {
	background-color: unset;
}
#draw-tabs-id {
	.pic-title {
		color: #fff;
	}
	.pic-base {
		height: 130px;
		overflow-y: auto;
		text-align: left;
	}
	.pic-other {
		width: 100%;
		height: 110px;
		overflow-y: auto;
		.el-button {
			border: 2px solid #37415b;
		}
		&::-webkit-scrollbar {
			/*滚动条整体样式*/
			width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
			height: 0;
		}
		&::-webkit-scrollbar-thumb {
			/*滚动条里面小方块*/
			border-radius: 5px;
			-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			background: #2fd5ff;
			scrollbar-arrow-color: red;
		}
		&::-webkit-scrollbar-track {
			/*滚动条里面轨道*/
			-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			border-radius: 0;
			background: rgba(0, 0, 0, 0.1);
		}
	}
	.el-tabs {
		&::-webkit-scrollbar {
			/*滚动条整体样式*/
			width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
			height: 0;
		}
		&::-webkit-scrollbar-thumb {
			/*滚动条里面小方块*/
			border-radius: 5px;
			-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			background: #2fd5ff;
			scrollbar-arrow-color: red;
		}
		&::-webkit-scrollbar-track {
			/*滚动条里面轨道*/
			-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			border-radius: 0;
			background: rgba(0, 0, 0, 0.1);
		}
	}
	.el-tabs__content {
		&::-webkit-scrollbar {
			/*滚动条整体样式*/
			width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
			height: 0;
		}
		&::-webkit-scrollbar-thumb {
			/*滚动条里面小方块*/
			border-radius: 5px;
			-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			background: #2fd5ff;
			scrollbar-arrow-color: red;
		}
		&::-webkit-scrollbar-track {
			/*滚动条里面轨道*/
			-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			border-radius: 0;
			background: rgba(0, 0, 0, 0.1);
		}
	}
	.el-tab-pane {
		// height: 330px;
		overflow: hidden;
		&::-webkit-scrollbar {
			/*滚动条整体样式*/
			width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
			height: 0;
		}
		&::-webkit-scrollbar-thumb {
			/*滚动条里面小方块*/
			border-radius: 5px;
			-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			background: #2fd5ff;
			scrollbar-arrow-color: red;
		}
		&::-webkit-scrollbar-track {
			/*滚动条里面轨道*/
			-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			border-radius: 0;
			background: rgba(0, 0, 0, 0.1);
		}
	}
	.el-form-item__label {
		color: #fff;
	}
	.el-form-item {
		margin-bottom: 18px;
	}
	.el-button {
		width: 37px;
		height: 37px;
		margin: 25px 47px 0 0;
		position: relative;
		display: inline-block;
		.dec {
			display: none;
			position: absolute;
			top: 100%;
			left: 50%;
			color: #fff;
			transform: translate(-52%, 0);
		}
		.choose {
			width: 100%;
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			color: #fff;

			.choose-top {
				height: 18px;
			}
			.choose-top:hover {
				background: #2e6484;
			}
			.choose-bot {
				height: 17px;
			}
			.choose-bot:hover {
				background: #2e6484;
			}
		}
	}
	.el-button:hover {
		border: 1px solid #2fd5ff;
	}
	.el-button:hover .dec {
		display: block;
	}
	.el-button:hover .choose {
		display: block;
	}
	.point {
		background-image: url('~@/assets/images/draw/point.png');
	}
	.point.current {
		background-image: url('~@/assets/images/draw/point2.png');
	}
	.line {
		background-image: url('~@/assets/images/draw/line.png');
	}
	.line.current {
		background-image: url('~@/assets/images/draw/line2.png');
	}
	.surface {
		background-image: url('~@/assets/images/draw/surface.png');
	}
	.surface.current {
		background-image: url('~@/assets/images/draw/surface2.png');
	}
	.oval {
		background-image: url('~@/assets/images/draw/oval.png');
	}
	.oval.current {
		background-image: url('~@/assets/images/draw/oval2.png');
	}
	.rectangle {
		background-image: url('~@/assets/images/draw/rectangle.png');
	}
	.rectangle.current {
		background-image: url('~@/assets/images/draw/rectangle2.png');
	}
	.word {
		background-image: url('~@/assets/images/draw/word.png');
	}
	.word.current {
		background-image: url('~@/assets/images/draw/word2.png');
	}
	.circle {
		background-image: url('~@/assets/images/draw/circle.png');
	}
	.circle.current {
		background-image: url('~@/assets/images/draw/circle2.png');
	}
	.pointForm {
		.el-radio-button__inner {
			color: #fff;
		}
		.el-radio-button:first-child .el-radio-button__inner {
			border-left: 1px solid rgba(96, 118, 173, 0.35);
			border-radius: 2px 0 0 2px;
		}
		.el-radio-button__inner {
			background: rgba(16, 34, 67, 0.5);
			border: 1px solid rgba(96, 118, 173, 0.35);
		}
		.el-radio-button:last-child .el-radio-button__inner {
			border-radius: 0 2px 2px 0;
		}
		.el-radio-button__orig-radio:checked + .el-radio-button__inner {
			color: #fff;
			background-color: rgba(182, 125, 16, 1);
			border-color: rgba(182, 125, 16, 1);
			-webkit-box-shadow: -1px 0 0 0 rgba(182, 125, 16, 1);
			box-shadow: -1px 0 0 0 rgba(182, 125, 16, 1);
		}
		.el-input--small .el-input__inner {
			background: rgba(16, 34, 67, 0.5);
			border: 1px solid rgba(96, 118, 173, 0.35);
		}
		.el-input-number__decrease,
		.el-input-number__increase {
			width: 20px;
			background: #163066;
			border: none;
			color: #fff;
		}
		.el-input-number__increase {
			border-bottom: 1px solid #dcdfe682;
		}
		.pic {
			display: inline-block;
			width: 20px;
			height: 20px;
			background-size: 100% 100%;
			vertical-align: middle;
		}
		.pic1 {
			background-image: url('~@/assets/images/draw/circle2.png');
		}
		.pic2 {
			background-image: url('~@/assets/images/draw/word2.png');
		}
		.pic3 {
			background-image: url('~@/assets/images/draw/word2.png');
		}
		.pic4 {
			background-image: url('~@/assets/images/draw/word2.png');
		}
		.el-form-item__label {
			width: 96px !important;
		}
		.el-radio {
			margin-right: 13px;
		}
		.el-radio__label {
			padding-left: 3px;
		}
		.el-form-item__content {
			margin-left: 96px !important ;
		}
	}
	.lengthen {
		.el-input-number--small {
			width: 200px;
		}
	}
}
@media screen and(max-width: 1920px) and (max-height: 720px) {
	#draw-tabs-id {
		.el-button {
			margin: 14px 22px 0 0;
		}
	}
}
@media screen and(max-width: 1920px) and (max-height: 1080px) {
	#draw-tabs-id {
		.el-button {
			margin: 14px 14px 0 0;
		}
	}
}
</style>
